<template>
  <div>
    <ul class="pt-3 px-4">
    	<li v-for="item in recommendSongList" :key="item.id" class="d-flex pb-3" @click="getMusicId(item.id)">
        <img v-lazy="item.img" width="60" height="60">
        <div class="d-flex flex-wrap ai-center pl-3 flex-1">
          <div class="w100 pl-2 iconfont" style="font-size: 1.1rem; letter-spacing: 0.1rem;">&#xe616; {{item.name}}</div>
          <div class="text-xs text-darkgray" style="padding-left: 2rem;">{{item.singer}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      recommendSongList: Array
    },
    methods: {
      getMusicId(id) {
        this.$emit('get-music-id', id)
      }
    }
  }
</script>

<style>
  .subtitle-s {
    float: left;
    border: 1px solid red;
    border-radius: 6px;
    transform: scale(0.7);
  }
</style>
